<template>
  <div class="execution-history-overview-wrap">
    <div class="grid-column-3">
      <div style="width: calc(25% - 6px); margin-right: 6px">
        <div class="chart-container">
          <title-card title="业务系统告警TOP5" v-loading="loading1">
            <div v-if="dataset1 && dataset1.length" class="overview1-wrap">
              <div
                v-for="(item, index) in dataset1"
                :key="index"
                class="overview1-each"
              >
                <div style="font-size: 14px">
                  {{ index + 1 }}. {{ item.name }}
                </div>
                <div
                  class="process-wrap"
                  @click="chartClick('business', item.name)"
                >
                  <div
                    class="process-image"
                    :style="{
                      width: (item.num / dataset1[0].num) * 100 + '%',
                    }"
                  ></div>
                  <div class="process-count">
                    {{ formatNumber(item.num) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-tooltip" v-else>
              <commonIcon
                iconName="icon-wushuju"
                iconType="icon"
                :iconSize="36"
              ></commonIcon>
              <span class="tip-content">暂无数据</span>
            </div></title-card
          >
        </div>
        <div class="column-divided"></div>
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="OWASP风险分布"
            v-loading="loading2"
            :dataset="dataset2"
            @chartClick="chartClick($event, 'OWASP')"
          ></title-chart>
        </div>
      </div>
      <div
        class="chart-container"
        style="height: 692px; width: calc(50% - 12px); margin: 0 6px"
      >
        <title-card title="实时告警" v-loading="loading3">
          <div class="grid-column-4">
            <icon-kpi :config="kpi_1"></icon-kpi>
            <icon-kpi :config="kpi_2"></icon-kpi>
            <icon-kpi :config="kpi_3"></icon-kpi>
            <icon-kpi :config="kpi_4"></icon-kpi>
          </div>
          <div class="grid-column-7">
            <div class="monitor-wrap" @click="chartClick('', 'center1')">
              <div class="monitor-label">特权账号监测</div>
              <div class="monitor-count">{{ monitorObj.data1 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center2')">
              <div class="monitor-label">合作方访问监测</div>
              <div class="monitor-count">{{ monitorObj.data2 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center3')">
              <div class="monitor-label">跨境行为监测</div>
              <div class="monitor-count">{{ monitorObj.data3 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center4')">
              <div class="monitor-label">访问量异常</div>
              <div class="monitor-count">{{ monitorObj.data4 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center5')">
              <div class="monitor-label">流量异常</div>
              <div class="monitor-count">{{ monitorObj.data5 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center6')">
              <div class="monitor-label">数据包异常</div>
              <div class="monitor-count">{{ monitorObj.data6 }}</div>
            </div>
            <div class="split-line"></div>
            <div class="monitor-wrap" @click="chartClick('', 'center7')">
              <div class="monitor-label">时间异常</div>
              <div class="monitor-count">{{ monitorObj.data7 }}</div>
            </div>
          </div>

          <div class="scroll_table">
            <div style="display: inline-block; width: 100%; height: 100%">
              <common-table
                ref="alarmTable"
                class="table"
                :stripe="true"
                style="height: 100%"
                :data="tableData"
                :header-cell-style="{ background: '#D3E4F645' }"
              >
                <el-table-column
                  prop="ruleName"
                  label="规则名称"
                  width="200"
                  show-overflow-tooltip
                ></el-table-column>

                <el-table-column
                  prop="alarmContent"
                  label="告警描述"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="alarmTime"
                  label="告警时间"
                  width="180"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row }"
                    >{{ parseTime(new Date(row.alarmTime)) }}
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="left" width="60">
                  <el-button type="text">详情 </el-button>
                </el-table-column>
              </common-table>

              <div @click="itemClick($event)">
                <vue-seamless-scroll
                  :data="tableData"
                  :header-cell-style="{ background: '#D3E4F645' }"
                  class="seamless-warp"
                  style="width: 100%"
                  :class-option="classOption"
                >
                  <common-table
                    ref="alarmTable"
                    :stripe="true"
                    :data="tableData"
                    class="table_scroll"
                  >
                    <el-table-column
                      prop="ruleName"
                      label="规则名称"
                      width="200"
                      show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column
                      prop="alarmContent"
                      label="告警描述"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      prop="alarmTime"
                      label="告警时间"
                      width="180"
                      show-overflow-tooltip
                    >
                      <template slot-scope="{ row }"
                        >{{ parseTime(new Date(row.alarmTime)) }}
                      </template>
                    </el-table-column>

                    <el-table-column label="操作" align="left" width="60">
                      <template slot-scope="scope">
                        <el-button type="text" :data="JSON.stringify(scope.row)"
                          >详情
                        </el-button>
                      </template>
                    </el-table-column>
                  </common-table>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </title-card>
      </div>
      <div style="width: calc(25% - 6px); margin-left: 6px">
        <div class="chart-container">
          <title-chart
            type="chart-cirque"
            title="脆弱性分布"
            v-loading="loading4"
            :dataset="dataset4"
            @chartClick="chartClick($event, 'vulnerability')"
          ></title-chart>
        </div>
        <div class="column-divided"></div>
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="接口监测事件分布TOP5"
            v-loading="loading5"
            :dataset="dataset5"
            @chartClick="chartClick($event, 'event')"
          ></title-chart>
        </div>
      </div>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-2">
      <div class="chart-container">
        <title-chart
          type="chart-bar"
          title="接口监测告警访问源TOP10"
          v-loading="loading6"
          :dataset="dataset6"
          @chartClick="chartClick($event, 'accessSource')"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          type="chart-line"
          title="接口监测近7日告警趋势"
          v-loading="loading7"
          :dataset="dataset7"
          @chartClick="chartClick($event, 'sevenDay')"
        ></title-chart>
      </div>
    </div>
    <drill-detail
      ref="drillDetail"
      v-if="drillDetailShow"
      :drillDetailShow="drillDetailShow"
      :drillObj="drillObj"
      @close="drillDetailShow = false"
    ></drill-detail>
    <WebSocket
      :currentModule="'alarmOverview'"
      :path="'actualAlarmSocket'"
    ></WebSocket>
    <alarm-detail
      v-if="detailShow"
      @close="detailShow = false"
      :targetIp="targetIp"
      :detail="detailForm"
    ></alarm-detail>
  </div>
</template>

<script>
import TitleChart from "@/components/EChart/TitleChart";
import commonIcon from "@/components/CommonIcon";
import BaseChart from "@/components/EChart/components/BaseChart";
import { formatNumber } from "@/utils/util";
import IconKpi from "@/components/IconKpi";
import DrillDetail from "./components/drillDetail";
import AlarmDetail from "./components/alarmDetail";
import WebSocket from "@/layout/components/websocket";
import { mapState } from "vuex";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  fetchBusinessAlarm,
  fetchOwaspAlarm,
  fetchWeakAlarm,
  fetchEventAlarm,
  fetchAlarmSource,
  fetchSevenDayAlarm,
  fetchRealTimeAlarm,
} from "@/api/alarmCenter/overview";
export default {
  components: {
    TitleChart,
    commonIcon,
    BaseChart,
    IconKpi,
    DrillDetail,
    WebSocket,
    AlarmDetail,
    vueSeamlessScroll,
  },
  computed: {
    ...mapState("notice", ["alarmOverview"]),

    kpi_1() {
      if (this.alarmOverview.count) {
        return {
          icon: "iconfont icon-gaojingzongshu",
          color: "#DE253C",
          label: "告警总数",
          value: this.alarmOverview.count,
        };
      }
      return this.kpi_1_tmp;
    },

    kpi_2() {
      if (this.alarmOverview.solved) {
        return {
          icon: "iconfont icon-yichuligaojingshu",
          color: "#8FC2AA",
          label: "已处理",
          value: this.alarmOverview.solved,
        };
      }
      return this.kpi_2_tmp;
    },

    kpi_3() {
      if (this.alarmOverview.solving) {
        return {
          icon: "iconfont icon-zhongjigaojingshu",
          color: "#F8B73D",
          label: "处理中",
          value: this.alarmOverview.solving,
        };
      }
      return this.kpi_3_tmp;
    },

    kpi_4() {
      if (this.alarmOverview.pending) {
        return {
          icon: "iconfont icon-minganguizeguanli",
          color: "#FC7680",
          label: "未处理",
          value: this.alarmOverview.pending,
        };
      }
      return this.kpi_4_tmp;
    },

    monitorObj() {
      if (
        this.alarmOverview.privilegeAlarm &&
        this.alarmOverview.privilegeAlarm.length > 0
      ) {
        this.getPrivilegeAlarm(this.alarmOverview.privilegeAlarm);
        this.getAbnormalAccount(this.alarmOverview);
      }

      return this.monitorObjTmp;
    },

    tableData() {
      if (
        this.alarmOverview.alarmInfos &&
        this.alarmOverview.alarmInfos.length > 0
      ) {
        return this.alarmOverview.alarmInfos;
      }

      return this.tableDataTmp;
    },

    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.tableData
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      dataset1: [],

      dataset2: {
        dimensions: ["name", "num"],
        source: [],
        option: {
          color: ["#8FC2AA"],
          yAxis: {
            name: "单位： 个",
            nameGap: 25,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        },
      },

      kpi_1_tmp: {
        icon: "iconfont icon-gaojingzongshu",
        color: "#DE253C",
        label: "告警总数",
        value: 0,
      },

      kpi_2_tmp: {
        icon: "iconfont icon-yichuligaojingshu",
        color: "#8FC2AA",
        label: "已处理",
        value: 0,
      },

      kpi_3_tmp: {
        icon: "iconfont icon-zhongjigaojingshu",
        color: "#F8B73D",
        label: "处理中",
        value: 0,
      },

      kpi_4_tmp: {
        icon: "iconfont icon-minganguizeguanli",
        color: "#FC7680",
        label: "未处理",
        value: 0,
      },

      monitorObjTmp: {
        data1: 0,
        data2: 0,
        data3: 0,
        data4: 0,
        data5: 0,
        data6: 0,
        data7: 0,
      },

      tableDataTmp: [],

      dataset4: {
        dimensions: ["name", "num"],
        source: [],
        option: {
          color: ["#DE253C", "#8FC2AA", "#F8B73D", "#FC7680"],

          series: [
            {
              type: "pie",
              radius: ["45%", "60%"],
              center: ["30%", "50%"],
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                borderWidth: 4,
                borderColor: "#fff",
              },
            },
          ],
        },
      },
      dataset5: {
        dimensions: ["name", "num"],
        source: [],
        option: {
          color: ["#76BBBC"],
          xAxis: {
            type: "category",
            axisLabel: {
              show: true,
              rotate: 0,
              interval: 0,
              align: "center",
              width: 55,
              overflow: "breakAll",
              ellipsis: "...",
              formatter: function (value) {
                let tip = value.length > 10 ? "..." : "";
                return value.substring(0, 9) + tip;
              },
            },
          },
          yAxis: {
            name: "单位： 次",
            nameGap: 25,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        },
      },

      //接口监测告警访问源TOP10
      dataset6: {
        dimensions: ["name", "次数"],
        source: [],
        option: {
          legend: {
            show: true,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              show: true,
              rotate: -15,
              margin: 22,
              align: "center",
            },
          },
          color: ["#AF8FED"],
          yAxis: {
            name: "单位： 次",
            nameGap: 25,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        },
      },

      // 接口监测近7日告警趋势
      dataset7: {
        dimensions: ["name", "数量"],
        source: [],

        option: {
          xAxis: {
            type: "category",
            axisLabel: {
              show: true,
              rotate: -15,
              margin: 22,
              align: "center",
            },
          },
          yAxis: {
            type: "value",
            name: "单位： 次",
            nameGap: 25,
          },
          series: [
            {
              type: "line",
              smooth: true,
            },
          ],
        },
      },

      dialogTitle: "",
      drillDetailShow: false,
      drillObj: {},
      detailShow: false,
      targetIp: {},
      detailForm: {},
      timer: null,
    };
  },

  mounted() {
    // 实时告警
    this.getRealTimeAlarm();

    // 业务系统告警TOP5
    this.getBusinessAlarm();

    // OWASP风险
    this.getOwaspAlarm();

    // 脆弱性
    this.getWeakAlarm();

    // 接口监测事件分布
    this.getEventAlarm();

    // 接口监测告警访问源TOP10
    this.getAlarmSource();

    // 近7天告警
    this.getSevenDayAlarm();

    // setTimeout(() => {
    //   this.infinitScroll();
    // }, 1000);
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    formatNumber(num) {
      return formatNumber(num);
    },

    itemClick(e) {
      const target = e.target.parentElement; // 按钮元素

      if (target.tagName === "BUTTON") {
        let stringifyData = target.getAttribute("data");
        let row = JSON.parse(stringifyData);
        //详情页数据
        this.detailShow = true;
        this.targetIp = { targetIp: row.targetIp, sourceIp: row.sourceIp };
        this.detailForm = row;
        return;
      }
    },

    chartClick(row, name) {
      let title = "";
      let type = "";
      if (name === "alarmlist") {
        return;
      }
      //业务系统告警
      if (row === "business") {
        title = name;
        type = "BUSINESS";
      }
      // OWASP风险
      if (name === "OWASP") {
        title = row.name;
        type = "OWASP";
      }

      //监测
      if (name === "center1") {
        title = "特权账号";
        type = "PRIVILEGED";
      }
      if (name === "center2") {
        title = "合作方访问";
        type = "PARTNERS";
      }
      if (name === "center3") {
        title = "跨境行为";
        type = "CROSSBORDER";
      }
      //异常
      if (name === "center4") {
        title = "访问量";
        type = "ABNORMAL1";
      }
      if (name === "center5") {
        title = "流量";
        type = "ABNORMAL2";
      }
      if (name === "center6") {
        title = "数据包";
        type = "ABNORMAL3";
      }
      if (name === "center7") {
        title = "时间";
        type = "ABNORMAL4";
      }
      // 脆弱性
      if (name === "vulnerability") {
        title = row.name;
        type = "VULNERABILITY";
      }

      // 接口监测事件
      if (name === "event") {
        title = row.name;
        type = "EVENT";
      }

      // 接口监测告警访问源
      if (name === "accessSource") {
        title = row.name;
        type = "ACCESSSOURCE";
      }

      // 接口监测近7日告警
      if (name === "sevenDay") {
        title = row.name;
        type = "SEVENDAY";
      }

      this.drillObj = {
        title: title,
        type: type,
      };
      this.drillDetailShow = true;
    },

    getRealTimeAlarm() {
      this.loading3 = true;
      fetchRealTimeAlarm()
        .then((res) => {
          if (res && res.rescode === 200) {
            let data = res.data;
            this.tableDataTmp = data.alarmInfos;
            this.kpi_1_tmp.value = data.count;
            this.kpi_2_tmp.value = data.solved;
            this.kpi_3_tmp.value = data.solving;
            this.kpi_4_tmp.value = data.pending;
            this.getPrivilegeAlarm(data.privilegeAlarm);
            this.getAbnormalAccount(data);
          }
        })
        .finally(() => {
          this.loading3 = false;
        });
    },

    //详情
    handleDetail(row) {},

    // 监测数量
    getPrivilegeAlarm(data) {
      if (data && data.length > 0) {
        data.forEach((item) => {
          if (item.name === "特权账号监测") {
            this.monitorObjTmp.data1 = item.num;
          }
          if (item.name === "合作方访问监测") {
            this.monitorObjTmp.data2 = item.num;
          }
          if (item.name === "跨境行为监测") {
            this.monitorObjTmp.data3 = item.num;
          }
        });
      }
    },

    // 获取异常数量
    getAbnormalAccount(data) {
      this.monitorObjTmp.data4 = data.vistExcAlarm[0]?.num;
      this.monitorObjTmp.data5 = data.flowExcAlarm[0]?.num;
      this.monitorObjTmp.data6 = data.dataToExcAlarm[0]?.num;
      this.monitorObjTmp.data7 = data.timeExcAlarm[0]?.num;
    },

    // 业务系统告警TOP5
    getBusinessAlarm() {
      this.loading1 = true;
      fetchBusinessAlarm()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            this.dataset1 = data || [];
          }
        })
        .finally(() => {
          this.loading1 = false;
        });
    },

    // OWASP风险
    getOwaspAlarm() {
      this.loading2 = true;
      fetchOwaspAlarm()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            this.dataset2.source = data || [];
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },

    // 脆弱性
    getWeakAlarm() {
      this.loading4 = true;
      fetchWeakAlarm()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            this.dataset4.source = data || [];
          }
        })
        .finally(() => {
          this.loading4 = false;
        });
    },

    // 接口监测事件分布
    getEventAlarm() {
      this.loading5 = true;
      fetchEventAlarm()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            this.dataset5.source = data || [];
          }
        })
        .finally(() => {
          this.loading5 = false;
        });
    },

    // 接口监测告警访问源TOP10
    getAlarmSource() {
      this.loading6 = true;
      fetchAlarmSource()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            if (data && data.length > 0) {
              data.forEach((item) => {
                item["次数"] = item.num;
              });
            }
            this.dataset6.source = data || [];
          }
        })
        .finally(() => {
          this.loading6 = false;
        });
    },

    // 近7天告警
    getSevenDayAlarm() {
      this.loading7 = true;
      fetchSevenDayAlarm()
        .then((res) => {
          if (res && res.code === 200) {
            let data = res.data;
            if (data && data.length > 0) {
              data.forEach((item) => {
                item["数量"] = item.num;
              });
            }
            this.dataset7.source = data || [];
          }
        })
        .finally(() => {
          this.loading7 = false;
        });
    },

    mouseover() {
      // clearInterval(this.timer);
    },
    mouseout() {
      // this.autoScroll(false);
    },
    autoScroll(init) {
      const t = 50;
      this.$nextTick(() => {
        const box = this.$el.querySelector(".el-table__body-wrapper");
        const content = this.$el.querySelector(".el-table__body");
        if (init) box.scrollTop = 0;
        this.timer = setInterval(() => {
          this.rollStart(box, content);
        }, t);
      });
    },
    rollStart(box, content) {
      if (box.scrollTop >= content.scrollHeight - box.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
    },

    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.alarmTable;
      // 拿到表格中承载数据的div元素
      const divData = table.$el.children[0].children[2];
      let that = this;

      divData.onmouseover = function () {
        clearInterval(that.timer);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        that.timer = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      }
      start();
    },
  },
};
</script>
<style lang="scss" scoped>
.execution-history-overview-wrap {
  width: 100%;
  overflow-y: scroll;
  height: 100%;
  background-color: #eee;
  overflow-x: hidden;
  .chart-container {
    height: 340px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }
  .grid-column-3 {
    display: flex;
    justify-content: space-between;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-4 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
  .overview1-each {
    height: 54px;
  }

  ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
    overflow: hidden;
  }

  .overview1-wrap {
    position: relative;
    .process-wrap {
      position: absolute;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-top: 3px;
      cursor: pointer;

      .process-image {
        width: 100%;
        height: 12px;
        border-radius: 8px;
        background-color: #ed9d8f;
      }
      .process-count {
        font-size: 14px;
        margin-left: 5px;
        width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.global-icon-kpi-wrap {
  height: 70px;
  padding: 14px;
}

::v-deep .global-icon-kpi-wrap .icon-wrap {
  height: 48px;
  width: 48px;
}

::v-deep .global-icon-kpi-wrap .icon-wrap .iconfont {
  font-size: 20px;
}

::v-deep .global-icon-kpi-wrap .icon-kpi {
  align-items: center;
}

::v-deep .global-icon-kpi-wrap .content-wrap .value {
  font-size: 22px;
  margin-bottom: 2px;
}

::v-deep .global-icon-kpi-wrap .content-wrap {
  margin-left: 10px;
}

.grid-column-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 12px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  .monitor-wrap {
    display: flex;
    flex-flow: column nowrap;
    &:last-child {
      border-right: none;
    }

    .monitor-label {
      color: #929292;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .monitor-count {
      font-size: 20px;
      margin-top: 10px;
    }
  }
  .split-line {
    height: 44px;
    border-left: 1px #e9e9e9 solid;
  }
}

.scroll_table {
  display: flex;
  ::v-deep .table .el-table__body-wrapper {
    display: none;
  }
  // 重点注意这段样式
  .seamless-warp {
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
    ::v-deep .el-table__empty-block {
      display: none;
    }
  }
}

.chart-inside-wrap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}
</style>
